<template>
    <div class="login-wrap">
        <div class="login-lt">
            <!-- <div class="login"></div> -->
            <div class="login-img"></div>
        </div>
        <div class="login-rt">
            <div class="ms-login">
                <div class="title">欢 迎 登 录</div>
                <input type="text" v-model="param.username" class="login-input user" placeholder="请输入用户名">
                <input type="password" v-model="param.password" class="login-input pass" placeholder="请输入密码">

                <div>
                    <button @click="submitLogin()">登录</button>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { login } from '../../api/index';
export default {
    data: function () {
        return {
            param: {
                username: '',
                password: ''
            },
        };
    },
    methods: {

        submitLogin() {

            if (!this.param.username) {
                this.$notify.error({
                    title: '错误',
                    message: '请输入用户名'
                });
                return;
            }
            if (!this.param.password) {
                this.$notify.error({
                    title: '错误',
                    message: '请输入密码'
                });
                return;
            }
            let data = {
                account: this.param.username,
                password: this.param.password,
            }
            login(data).then(res => {
                const row = res.data.data
                if (res.data.success) {
                    this.$message({
                        message: '登录成功',
                        type: 'success'
                    });
                    this.$router.push('/home');
                    sessionStorage.setItem('TOKEN', row.token);
                    sessionStorage.setItem('username', row.userName);
                } else {
                    this.$message({
                        type: 'error',
                        message: '用户名密码错误!'
                    });
                }
            }).catch(error => {
                console.error(error);
                this.$message({
                    type: 'error',
                    message: '登录出错!'
                });
            });
        },

    }
};
</script>


<style lang="less" scoped>
.login-wrap {
    position: relative;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background: url('../../assets/img/login.jpg') no-repeat;
    background-size: 100% 100%;
}

.login-lt {
    position: absolute;
    top: 0;
    left: 0;
    width: 50%;
    height: 100%;

    .login-img {
        position: absolute;
        top: 70px;
        left: 100px;
        width: 520px;
        height: 75px;
        // background: url('../../assets/img/login-title.png') no-repeat; 
        background-size: 100% 100%;
    }
}

.login-rt {
    position: absolute;
    right: 0;
    top: 0;
    width: 50%;
    height: 100%;
    /* background-color:#fff; */
}

.ms-login {
    position: absolute;
    left: 30%;
    top: 50%;
    width: 500px;
    height: 300px;
    margin: -190px 0 0 -175px;
    border-radius: 5px;

}

.title {

    color: #6E66CD;
    font-size: 24px;
    margin-bottom: 10px;
}

.login-input {
    width: 350px;
    height: 50px;
    border: 0;
    outline: none;
    border-radius: 50px;
    margin-bottom: 30px;
    box-sizing: border-box;
    padding: 0 36px;
    font-size: 16px;
    color: #666;
}

.user {
    background-image: url('../../assets/img/use.png');
    background-size: 20px 20px;
    background-position: 10px 14px;
    background-repeat: no-repeat;
}

.pass {
    background-image: url('../../assets/img/password.png');
    background-size: 20px 20px;
    background-position: 10px 14px;
    background-repeat: no-repeat;
}

input[type="text"]:focus {
    box-shadow: 0 0 5px #6E66CD;
    transition: all 0.5s;
}

input[type="password"]:focus {
    box-shadow: 0 0 5px #6E66CD;
    transition: all 0.5s;
}

::-webkit-input-placeholder {
    /* WebKit browsers */
    /* color: #ccc; */
    color: #999;
    font-size: 16px;
}

::-moz-placeholder {
    /* Mozilla Firefox 19+ */
    color: #ccc;
    font-size: 16px;
}

:-ms-input-placeholder {
    /* Internet Explorer 10+ */
    color: #ccc;
    font-size: 16px;
}

button {
    width: 350px;
    height: 50px;
    text-align: center;
    line-height: 50px;
    border: 0;
    outline: none;
    font-size: 18px;
    border-radius: 50px;
    color: #fff;
    letter-spacing: 2px;
    /* background-color:#0960bd; */
    background: linear-gradient(to right, #89C4FE, #8EAAFE);
    border-color: #0960bd;
    transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
    cursor: pointer;
}

button:hover {
    background-color: #2a7dc9;
}
</style>